import { EditOutlined } from "@ant-design/icons";
import { Button, Card, Form, Input, Modal, message } from "antd";
import { useState } from "react";
import EmojiModal from "./EmojiModal";

interface PromptTypeInfo {
    [enumName: string]: {
        description?: string;
        title?: string;
        emoji?: string;
    };
}

interface TypePromptPanelProps {
    types: PromptTypeInfo;
    onChange: (types: PromptTypeInfo) => void;
}

export default function TypePromptPanel(props: TypePromptPanelProps) {

    const [showAddModal, setShowAddModal] = useState(false);
    const [newType, setNewType] = useState("");
    const [emojiTypeKey, setEmojiTypeKey] = useState("");

    return (
        <Card title="类型定义" bordered={false} extra={
            <Button onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setNewType("");
                setShowAddModal(true);
            }}>新增类型</Button>
        }>
            {Object.keys(props.types).map(typeKey => (
                <Card key={typeKey} title={typeKey} style={{ marginBottom: "10px" }} extra={
                    <Button type="link" danger onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        let types = props.types;
                        delete types[typeKey];
                        props.onChange(types);
                    }}>删除类型</Button>
                }>
                    <Form>
                        <Form.Item label="标题">
                            <Input value={props.types[typeKey].title} onChange={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                let types = props.types;
                                types[typeKey].title = e.target.value;
                                props.onChange(types);
                            }} />
                        </Form.Item>
                        <Form.Item label="描述">
                            <Input value={props.types[typeKey].description} onChange={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                let types = props.types;
                                types[typeKey].description = e.target.value;
                                props.onChange(types);
                            }} />
                        </Form.Item>
                        <Form.Item label="emoji">
                            <span>
                                {props.types[typeKey].emoji}
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    setEmojiTypeKey(typeKey);
                                }}><EditOutlined /></Button>
                            </span>
                        </Form.Item>
                    </Form>
                </Card>
            ))}
            {emojiTypeKey != "" && (
                <EmojiModal onCancel={() => setEmojiTypeKey("")} onSelect={emoji => {
                    if (props.types[emojiTypeKey] !== undefined) {
                        props.types[emojiTypeKey].emoji = emoji;
                        props.onChange(props.types);
                    }
                    setEmojiTypeKey("");
                }} />
            )}
            {showAddModal == true && (
                <Modal title="新增类型" open
                    okText="新增" okButtonProps={{ disabled: newType.trim() == "" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setNewType("");
                        setShowAddModal(false);
                    }}
                    onOk={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        let types = props.types;
                        if (types[newType.trim()] !== undefined) {
                            message.error(`类别${newType.trim()}已经存在`);
                        } else {
                            types[newType.trim()] = {
                                description: "",
                                title: "",
                                emoji: "",
                            }
                            props.onChange(types);
                            setNewType("");
                            setShowAddModal(false);
                        }
                    }}>
                    <Form>
                        <Form.Item label="类型名称">
                            <Input value={newType} onChange={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                setNewType(e.target.value);
                            }} />
                        </Form.Item>
                    </Form>
                </Modal>
            )}
        </Card>
    );
}